<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
		<title>确认支付</title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			
			.header {
				width: 100%;
				background: #0c90d0;
				margin: 0;
				padding: 0;
				text-align: center;
				display: flex;
				justify-content: flex-start;
			}
			
			.header img {
				width: 0.18rem;
				height: 0.18rem;
				margin-top: 0.09rem;
				margin-left: 0.13rem;
			}
			
			.header span {
				font: 0.19rem/0.38rem "";
				color: #fff;
				margin-left: 1.08rem;
			}
			
			body h3 {
				font: 0.24rem/0.48rem "";
				color: #fff;
			}
			
			h4 {
				font: 0.15rem/0.3rem "";
				color: #373737;
			}
			
			.page_1 {
				width: 100%;
				margin-top: 30%;
			}
			
			.page_1 button {
				display: block;
				width: 1.5rem;
				margin: 0.5rem auto;
				height: 50px;
			}
			
			.smart_div {
				width: 88.2%;
				margin: 0 auto;
				margin-top: 0.01rem;
			}
			
			.smart_div ul {
				width: 100%;
			}
			
			.smart_div ul li {
				width: 100%;
				height: 0.56rem;
			}
			
			.smart_div ul li span {
				font-size: 0.15rem;
				color: #252525;
				display: inline-block;
				width: 0.79rem;
			}
			
			.smart_div ul li s {
				font: 0.15rem/0.56rem "";
				color: #222222;
				display: inline-block;
				margin-left: 0.34rem;
			}
			
			.smart_div ul li input {
				margin-left: 0.34rem;
			}
			
			.smart_div button {
				display: block;
				height: 0.36rem;
				width: 100%;
				margin-bottom: 0.015rem;
			}
			
			#rush_tips {
				color: red;
				display: block;
				margin: 0 auto;
				width: 50%;
				font: 0.12rem/0.16rem "";
				margin-left: 1.14rem;
			}
			
			#ID_card_tips {
				color: red;
				display: block;
				margin: 0 auto;
				width: 50%;
				font: 0.12rem/0.16rem "";
				margin-left: 1.14rem;
			}
			
			body #showResult {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(52, 52, 52, .9);
				/*display: none;*/
			}
			
			body #showResult p {
				margin-left: 30%;
				margin-top: 82%;
				color: #FFFF00;
			}
			
			.icon {
				width: 22px;
				height: 22px;
				vertical-align: -6px;
				fill: currentColor;
				overflow: hidden;
			}
			
			#YWaitDialog {
				background-color: #fff;
				position: absolute;
				margin: auto;
				top: 0px;
				left: 0;
				display: none;
				height: 100%;
				width: 100%;
			}
			
			#YWaitDialog p {
				height: 50px;
				width: 100%;
				position: absolute;
				margin: auto;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				text-align: center;
				vertical-align: central;
			}
		</style>

	</head>

	<body>
		<div class="main" id="app">
			<div id="showResult">
				<p>正在加载中请稍后...</p>
			</div>
			<div class="smart_div">
				<ul>

					<li>
						<span>区域：</span><s v-text="buildname"></s>
					</li>
					<li>
						<span>楼层：</span><s v-text="floor"></s>
					</li>
					<li>
						<span>宿舍号：</span><s v-text="roomid"></s>
					</li>
					<li>
						<span>电表表号：</span><s v-text="meterid"></s>
					</li>
					<li>
						<span>用电状态：</span><s v-text="type"></s>
					</li>
					<li>
						<span>剩余金额：</span><s v-text="Balance"></s>
					</li>
					<li>
						<span>购电次数：</span><s v-text="times"></s>
					</li>
					<!--<li>
					<span>上一次购电金额：</span><s id="shangyici">50</s>
				</li>-->
					<li>
						<span>倍率：</span><s v-text="Rate"></s>
					</li>
					<li style="display: none;">
						<span>身份证号：</span><s v-text=""></s>
					</li>
					<li>
						<span>购电金额：</span><input v-model="money" type="number" name="num_rush" id="num_rush" placeholder="请输入购电金额,单位￥" value="" />
					</li>
					<!--<li>
					<span>身份证号：</span><input type="tel" name="ID_card" id="ID_card" placeholder="需要购电请输入身份证号" value="" /><br />
					<s id="ID_card_tips"></s>
				</li>-->
				</ul>
				<div class="form-group">
					<lable>
						<input type="radio" v-model="pay_method_id" name="pay_method" value="1">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-wxpay"></use>
						</svg>
						<span class="span">微信支付</span>
					</lable>
					<lable style="margin-left: 0.2rem;">
						<input type="radio" v-model="pay_method_id" name="pay_method" value="2">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-zhifubaozhifu"></use>
						</svg>
						<span class="span">支付宝支付</span>
					</lable>
				</div>
				<button id="smart_search" @click="sure_pay" type="button" class="btn btn-primary">购电</button>
			</div>
			<!-- 模态框（Modal）提示信息 -->
			<div class="modal fade" id="myModal_tips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">提示信息</h4>
						</div>
						<div class="modal-body" id="tips" v-text="tips_modal">
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/iconfont.js" type="text/javascript" charset="utf-8"></script>
<script>
	new Vue({
		el: '#app',
		data: {
			pay_method_id: 1,
			money: '',
			tips_modal: "请确认信息",
			address: "",
			buildname: "",
			floor: "",
			roomid: "",
			meterid: "",
			urltest: "",
			Balance: "",
			times: "",
			Rate: "",
			type: "",
			ID_card: "",
			order_id: "",
			urltest_b: ""
		},
		created: function() {

		},
		mounted: function() {
			data = {
				"buildname": "11号公寓楼",
				"floor": "1",
				"roomid": "117",
				"meterid": "000000381562"
			}
			this.address = JSON.parse(sessionStorage.getItem("address"));
			console.log(this.address)
			this.buildname = this.address.sel_1;
			this.floor = this.address.sel_2;
			this.roomid = this.address.sel_3;
			this.meterid = this.address.sel_4;
			//			debugger
			//			var urltest = 'http://47.92.222.216:8089/';			
			//			var urltest_b = 'http://47.92.222.216:8086/';

			this.urltest = sessionStorage.getItem("urltest");
			this.urltest_b = sessionStorage.getItem("urltest_b");
			this.ID_card = sessionStorage.getItem("ID_card");

			//取订单号
			this.order_number()
		},
		methods: {
			//确认支付
			//			sure_pay: function() {
			//				console.log(this.money);
			//				console.log(this.pay_method_id);
			//				if(this.money < 1) {
			//					this.tips_modal = "金额不能小于1";
			//					$('#myModal_tips').modal('show');
			//				}
			//			},
			//拿电表信息
			order_number: function() {
				var that = this;
				var address = sessionStorage.getItem("address");
				var obj = {
					"area": that.address.sel_1,
					"roomName": that.address.sel_3,
					"meterId": that.address.sel_4,
				};
				var req = JSON.stringify(obj);
				console.log(that.urltest);
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urltest + "/notcheck/getHouseMeterInformationDetile",
					data: req,
					async: false,
					dataType: "json",
					beforeSend: function() {
						$("#showResult").show();
					},
					success: function(msg) {
						console.log(msg);
						if(msg.resCode == 200) {
							$("#showResult").hide();
							that.Balance = msg.obj.Balance;
							$("#shengyu").html(msg.obj.Balance);
							if(msg.obj.Balance > 0) {
								that.type = "正常";
							} else {
								that.type = "已停电";
							}
							that.times = msg.obj.times;
							that.Rate = msg.obj.Rate;
						} else if(msg.resCode == 404) {
							window.location.href = "jq404.html";
						} else {
							that.tips_modal = msg.resmsg + "，请稍后重试";
							$('#myModal_tips').modal('show');
						}

					},
					error: function() {
						that.tips_modal = "发生错误1";
						$('#myModal_tips').modal('show');
					}
				});
			},
			//拿到订单号
			sure_pay: function() {
				var that = this;
				if(that.money < 1) {
					that.tips_modal = "金额不能小于1";
					$('#myModal_tips').modal('show');
					return
				}
				if(!(/(^[1-9]\d*$)/.test(that.money))) {
					that.tips_modal = "充值金额必须为整数";
					$('#myModal_tips').modal('show');
					return;
				}
				console.log(that.urltest);
				var obj = JSON.stringify({
					identityCard: that.ID_card,
					meterId: that.address.sel_4,
					rctualPayAmount: that.money,
					roomId: that.address.sel_3,
					rate: that.Rate,
				})
				$.ajax({
					cache: false,
					type: "POST",
					url: that.urltest + "notcheck/addPayOrder",
					dataType: "json",
					contentType: "application/json;charset=utf-8",
					async: false,
					data: obj,
					success: function(data) {
						if(data.resCode == 200) {
							that.order_id = data.obj;
							if(that.pay_method_id == 1) {
								that.go_wx(data.obj)
							} else if(that.pay_method_id == 2) {
								that.go_ali(data.obj)
							}
						} else if(data.resCode == 404) {
							window.location.href = "jq404.html";
						} else {
							that.tips_modal = data.resmsg;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						that.tips_modal = "发生错误——订单号获取不到";
						$('#myModal_tips').modal('show');
					}
				});
			},
			//调微信
			//			noverify/rechargeWxPay
			go_wx: function(info) {
				var that = this;
				console.log(that.urltest);
				var obj = JSON.stringify({
					paymentamt: that.money,
					eleorderid: info
				})
				console.log(obj)
				$.ajax({
					cache: false,
					type: "POST",
					url: that.urltest_b + "noverify/rechargeWxPay",
					dataType: "json",
					contentType: "application/json;charset=utf-8",
					async: false,
					data: obj,
					success: function(data) {
						if(data.code == 200) {
							console.log(data.data)
							that.open_az(data.data)
						} else {
							that.tips_modal = data.msg;
							$('#myModal_tips').modal('show');
						}
					},
					error: function(data) {
						that.tips_modal = "发生错误_微信下单失败";
						$('#myModal_tips').modal('show');
					}
				});
			},
			//调支付宝
			//			noverify/rechargeAliPay
			go_ali: function(info) {
				var that = this;
				console.log(that.urltest);
				var obj = JSON.stringify({
					paymentamt: that.money,
					eleorderid: info
				})
				console.log(obj)
				$.ajax({
					cache: false,
					type: "POST",
					url: that.urltest_b + "noverify/rechargeAliPay",
					dataType: "json",
					contentType: "application/json;charset=utf-8",
					async: false,
					data: obj,
					success: function(data) {
						if(data.code == 200) {
							console.log(data.data)
							that.open_az(data.data)
						} else {
							that.tips_modal = data.msg;
							$('#myModal_tips').modal('show');
						}
					},
					error: function(data) {
						that.tips_modal = "发生错误_支付宝下单失败";
						$('#myModal_tips').modal('show');
					}
				});
			},
			//判断安卓ios
			open_az: function(data) {
				var that = this;
				//判断操作系统
				var u = navigator.userAgent,
					app = navigator.appVersion;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				//	           ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端         
				if(isAndroid) {
					//这个是安卓操作系统
					//js调用app方法  getUserDataBayKeys此函数名必须与app方法名一致。	window.Android是调用Android方法。
					console.log(JSON.stringify(data));
					if(that.pay_method_id == 1) {
						window.Android.startWxPay(JSON.stringify(data));
					} else if(that.pay_method_id == 2) {
						window.Android.startAliPay(JSON.stringify(data));
					}
				}
				if(isIOS) {　　　　 //这个是ios操作系统	
					var pay_dict = {};
					if(that.pay_method_id == 1) {
						pay_dict = data;
						pay_dict.payway = "1";
					}
					if(that.pay_method_id == 2) {
						pay_dict.payString = data;
						pay_dict.payway = "2";
					}
					console.log(JSON.stringify(pay_dict))
					window.webkit.messageHandlers.iosCall.postMessage({
						parameter: JSON.stringify(pay_dict), //传递给ios的参数
						callBackResult: "payResult" //ios方法回调名字
					});
				}
			},

		}

	})
</script>
<script type="text/javascript">
	//app回调过来的函数   函数名必须与app方法名一致。
	function payResult(data) {
		console.log(data)
		if(data == 1) {
			$("#tips").html("支付成功")
			$('#myModal_tips').modal('show');
		} else {
			$("#tips").html("支付失败")
			$('#myModal_tips').modal('show');
		}
	}
</script>